<template>
    <div>
        <el-dialog :title="!form.id ? '添加分类信息' : '更新分类信息'" :visible.sync="cateDialogVisiable" width="50%"
            @close="resetForm('cateRef')" :close-on-click-modal="false">
            <!-- 内容主题区 -->
            <el-form ref="cateRef" :model="form" :rules="formRules" label-width="70px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="form.cat_name"></el-input>
                </el-form-item>
                <!-- 级联选择器：option用以指定数据源 -->
                <!-- props：用以指定配置对象 -->
                <el-form-item label="父级分类" prop="cat_pid">
                    <el-cascader v-model="selectedKeys" :options="parentCateList"
                        :props="{ expandTrigger: 'hover', checkStrictly: 'true', ...cascaderProps }"
                        @change="parentCateChanged" clearable></el-cascader>
                </el-form-item>
            </el-form>
            <!-- 底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="cateDialogVisiable = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        getCateList: {
            type: Function,
            default: null,
        }
    },
    data() {
        return {
            form: { // 商品分类表单数据对象
                cat_name: '', // 要添加的分类的名称
                cat_pid: 0, // 父级分类id
                cat_level: 0, // 分类的等级
            },
            parentCateList: [], // 父级分类数组列表
            selectedKeys: [], // 选中的分类的id
            cateDialogVisiable: false,
            isDisabled: false,
            formRules: {
                cat_name: [
                    { required: true, message: '请输入商品的分类名称', trigger: 'blur' },
                ],
            },
            cascaderProps: { // 指定级联选择器的配置对象
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            }
        };
    },
    methods: {
        async initFormData(cate) { // 初始化对话框
            this.isDisabled = false
            if (cate && cate.cat_id != null) { // 判断是添加或编辑分类信息
                this.form = JSON.parse(JSON.stringify(cate))
                this.isDisabled = true
            }
            this.getParentCateList()
            this.cateDialogVisiable = true
        },
        submitForm() { // 提交表单
            this.$refs.cateRef.validate(async valid => {
                if (!valid) return
                console.log(this.form);
                if (this.form && this.form.cat_id != null) {
                    const res = await this.$http.put('categories/' + this.form.cat_id,
                        { cat_name: this.form.cat_name }
                    )
                    if (res.meta.status != 200) return this.$message.error('更新商品分类信息失败')
                    this.$message.success('更新商品分类信息成功')
                    this.getCateList()
                    this.cateDialogVisiable = false
                } else {
                    const res = await this.$http.post('categories', this.form)
                    console.log(res);
                    if (res.meta.status != 201) return this.$message.error('新建商品分类信息失败')
                    this.$message.success('新建商品分类信息成功')
                    this.getCateList()
                    this.cateDialogVisiable = false
                }
            })
        },
        resetForm(refName) { // 重置表单数据
            this.$refs[refName].resetFields()
            this.form = { // 商品分类表单数据对象
                cat_name: '', // 要添加的分类的名称
                cat_pid: 0, // 父级分类id
                cat_level: 0, // 分类的等级
            }
            this.selectedKeys = []
        },
        parentCateChanged() { // 分类选项发生变化的触发事件
            console.log(this.selectedKeys);
            const len = this.selectedKeys.length
            if (len > 0) { // 说明选中了某父级分类
                // 拿到父级分类的id
                this.form.cat_pid = this.selectedKeys[len - 1]
                this.form.cat_level = len
                return
            } else {
                this.form.cat_pid = 0
                this.form.cat_level = 0
            }
        },        
        async getParentCateList() { // 获取父级分类的数据列表
            const res = await this.$http.get('categories', { params: { type: 2 } })
            if (res.meta.status != 200) return this.$message.error('获取商品父级分类信息失败')
            this.$message.success('获取商品父级分类信息成功')
            this.parentCateList = res.data
            console.log('父级分类信息->' + JSON.stringify(this.parentCateList))
            return res.data
        },
        delCateInfo(cate) { // 删除操作
            this.$confirm('是否删除该角色权限?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await this.$http.delete('categories/' + cate.cat_id)
            if (res.meta.status != 200) return this.$message.error('删除分类信息失败')
            this.$message.success('删除分类信息成功')
            this.getCateList()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })

        },
    },
};
</script>

<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
</style>